<template>
    <div class="heat-map-box">
        <div id="map" ref="mapObj"></div>
    </div>
</template>
<script setup>

import 'ol/ol.css';
import Map from 'ol/Map';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Tile as TileLayer, Heatmap as HeatmapLayer, Vector as VectorLayer } from 'ol/layer';
import View from 'ol/View';
import { Feature } from 'ol';
import { LineString, Point } from 'ol/geom';
import GeoJSON from 'ol/format/GeoJSON';

import { onMounted } from 'vue';
import { fromLonLat } from 'ol/proj';
import testHeatMap from '@/assets/testHeatMap.json';
import { Style, Icon, Stroke } from 'ol/style';

const bezierStyle = (feature) => {
    const geometry = feature.getGeometry()
    const featureType = feature.getGeometry().getType()
    const styles = []
    geometry.forEachSegment(function (start, end) {
        const dx = end[0] - start[0]
        const dy = end[1] - start[1]
        const rotation = Math.atan2(dy, dx)
        styles.push(
            new Style({
                geometry: new Point(end),
                image: new Icon({
                    src: require('@/assets/right.png'),
                    opacity: 1,
                    anchor: [0.5, 0.5],
                    rotateWithView: true,
                    rotation: -rotation,
                    scale: 0.1
                })
            })
        )
    })
    styles.push(
        new Style({
            stroke: new Stroke({
                color: '#FFD966',
                width: 3,
                lineDash: [20, 8, 1, 8]
            })
        })
    )
    return styles
}
const bezierFeatures = [];
onMounted(() => {
    const map = new Map({
        layers: [
            new TileLayer({
                source: new OSM(),
            }),
        ],
        target: 'map',
        view: new View({
            center: [0, 0],
            zoom: 2,
        }),
    });
    const lineArrow = [
        {
            name: '浙奉渔19001',
            type: 1,
            line: [[13739180.61760428, 3867806.8497407753], [13753601.705080839, 3864763.0546381413]]
        },
        {
            name: '中国海监7018',
            type: 2,
            line: [[13746408.59354844, 3872287.6211607265], [13754948.401795218, 3866382.9561385084]]
        },
        {
            name: '浙岱渔06423',
            type: 1,
            line: [[13764890.343228461, 3873362.5145883015], [13757755.785627745, 3867978.732211734]]
        },
        {
            name: '东海救101',
            type: 2,
            line: [[13766958.941841919, 3868072.8124196446], [13759617.524379842, 3866116.9934596373]]
        },
        {
            name: '中国海监7008',
            type: 2,
            line: [[13767786.38128729, 3860980.4743164163], [13757489.822948873, 3864373.4603425944]]
        },{
            name: '中国海监7008',
            type: 2,
            line: [[13767786.38128729, 3860980.4743164163], [13757489.822948873, 3864373.4603425944]]
        }
    ]

    //然后通过LineString绘制线条
    for (var i = 0; i < lineArrow.length; i++) {
        var feature = new Feature({
            geometry: new LineString(lineArrow[i].line),
            name: lineArrow[i].name
        })
        bezierFeatures.push(feature)
    }
    const bezierSource = new VectorSource({
        features: bezierFeatures
    })
    const bezierLayer = new VectorLayer({
        source: bezierSource,
        zIndex: 20,
        style: bezierStyle
    })
    map.addLayer(bezierLayer)

})
</script>
<style lang="css" scoped>
.heat-map-box {
    height: 90vh;
}

#map {
    height: 100%;
}
</style>